<!DOCTYPE html>
<html>
<head>
    <title>M3U8 Video Player</title>
    <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
    <style>
        .video-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .video-container > div {
            margin: 10px;
        }
    
    </style>
</head>
<body>
    <div class="video-container">
        {% for url in m3u8_urls %}
        <div class="animated-div" >
            <video id="video-{{ loop.index }}" class="video-js vjs-default-skin" controls>
                <source src="{{ url }}" type="application/x-mpegURL">
            </video>
            <script>
                var player{{ loop.index }} = videojs('video-{{ loop.index }}');
                player{{ loop.index }}.play();
            </script>
        </div>
        {% endfor %}
    </div>
</body>
</html>